<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>

</head>
<body>
    <div id="app">
        用户名：<input type="text" v-model="user.username"> <br>
        密码：<input type="password" v-model="user.password"> <br>

        <button @click="login">登录</button>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            user:{
                username:"",
                password:""
            }
        },
        methods:{
            login(){
                //以前我们写登录时，后端的登录的业务处理是我们自己写的，所以登录请求的路径自己定义的，获取请求参数的方式也是我们自己定义的
                /*
                    现在是使用Security实现登录业务，所以登录路径以及参数的携带方式必须符合security规则
                        请求的资源路径只能是/login，请求的方式只能是POST
                        请求参数的携带方式必须是key=value&key2=value2的形式，键名为username和password
                 */
                axios({
                    url:"http://localhost:81/login",
                    method:"post",
                    params:this.user
                }).then(resp=>{
                    let r = resp.data;
                    let code = r.code;
                    if (code==200){
                        /*
                            将后台返回的token信息存储到当前浏览器
                                sessionStorage:会话级别的存储，浏览器关闭后，数据会清除
                                localStorage：将信息存储到浏览器的文件夹中，关闭后，不清除
                         */
                        localStorage.setItem("security_token",r.data)
                    }else {
                        alert(r.msg)
                    }
                })
            }
        }
    });
</script>

</html>